<template>
  <div id="receiptList" class="wrapper">
    <!--回执信息 表格-->
    <el-table class="ur-table" stripe id="tableDom2" ref="tableDom2" :data="tables.datas" :height="300" highlight-current-row @row-click="rowClick">
      <el-table-column align="center" type="index" :index="indexMethod" label="序号" width="40"></el-table-column>
      <el-table-column v-for="(v,index) in tables.columns" :prop="v.field" :label="v.title" :width="v.width" align="center" :key="index">
        <template slot-scope="scope">
          <span>{{scope.row[v.field]}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="80" >
        <template slot="header" slot-scope="scope">详情</template>
        <template slot-scope="scope">
<!--          v-if="limits.indexOf('3_01_01_13')!=-1"-->
          <el-button size="small" class="ur-btn ur-btn-primary" style="height: 29px;" @click="receiptDialog(true,scope.row)"><i class="iconfont icon-xianshi"></i>查看</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" width="90" v-if="[10,11].indexOf(workResult)==-1">
        <template slot="header" slot-scope="scope">
          <!--      &&limits.indexOf('3_01_01_12')!=-1 操作-->
          <el-button class="ur-btn ur-btn-primary" style="height: 28px;"  @click="receiptDialog(false)" v-if="[10,11].indexOf(workResult)==-1">
            <i class="iconfont icon-tianjia"></i>添加回执
          </el-button>
        </template>
        <template slot-scope="scope">
<!--          v-if="limits.indexOf('3_01_01_14')!=-1"-->
          <el-button class="ur-btn ur-btn-danger d-inline-block" style="height: 29px;">
            <i class="font18 iconfont icon-delete mr-0"  @click="handleDel(scope.$index,scope.row)"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapState} from 'vuex'
  import api from 'api/api'
  export default {
    components: {},
    props: {
      workResult:null,
      receipts:{
        type:Array,
        default:function () {
          return []
        }
      },
      page:''
    },
    data() {
      return {
        tables: {
          sel: null,//选中行
          columns:   [
            {field: "Content", title: "回执信息", width:null},
            {field: "Created", title: "回执时间", width: null},
            {field: "Creator", title: "回执人", width: '80'}
          ],
          datas: []
        }
      }
    },
    watch: {
      receipts(v){
        this.tables.datas=v
      }
    },
    computed: mapState({
      limits:state=>state.user.userInfo.limits
    }),
    methods: {
      indexMethod(index) {
        return index + 1
      },
      rowClick(row, event, column){
        this.receipt=row
      },
      handleDel(index,row){
        this.$confirm('确认删除该记录吗', '提示', {type: 'warning'})
          .then(() => {
            api.fetchSimple('/SHWorkorder/DelReceipt',{ids:[row.Id]})
              .then(r=>{
                this.$message.success({showClose:true,message:'删除成功'})
                this.tables.datas.splice(index, 1)
              })
          })
      },
      receiptDialog(isAdd,receipt){
        this.$emit('receiptDialog',{showWorkDeal:false,showReceipt:true,isAdd:isAdd,receipt:receipt})
      },
    },
    created() {
      // for(let i=0;i<3;i++){
      //   let o={Content: "aaa", Created: "2020-05-21 13:52:15", Creator: "admin", FileIds: "", Id: i+1, UserName: null, WorkorderId: 21239}
      //   this.receipts.push(o)
      // }
    },
    mounted() {
    }
  }
</script>
<style  lang="stylus" rel="stylesheet/stylus">
  #receiptList{
    .el-table td, .el-table th{padding:7px 0;}
  }
</style>
